<!DOCTYPE html>

<html>
    <head>

        <title>表格</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }

table, th, td {
    border: 1px solid black;
}
caption{
    font-size: 20px;
    font-weight:700;
    margin-bottom: 20px;
}
tr{
    height: 30px;
    cursor: pointer;
}
table tr:nth-child(1){
    background-color: #f5f5f5;
}
table tr:not(:nth-child:hover){
    background-color: #f2f2f2;
}
        </style>
    </head>
    <body>
<body>
    <h2>学生信息表格</h2>
    <p>这里是学生信息表格，展示了学生的姓名、性别、年龄信息。</p>
	<table >
        <caption>学生信息表</caption>

		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
        <script>
            let students=[
                {name:"张三",gender:"男",age:20},
                {name:"李四",gender:"女",age:25},
                {name:"李四",gender:"男",age:99},
                {name:"李四",gender:"女",age:85}
            ]
            for (let i = 0; i < students.length; i++) {
                document.write(`
                    <tr>
                   
                        <td>${students[i].name}</td>
                        <td>${students[i].gender}</td>
                        <td>${students[i].age}</td>
                    </tr>
                    ` );
                }


        </script>




</table>
</body>
</html>
